@use "../../assets/scss/fun/index" as *;
body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  gap: 30px;
  place-content: center;
  background: #eafde6;
}

.folded {
  --r: 30px;
  width: 250px;
  aspect-ratio: 1.5;
  box-sizing: border-box;
  background: bothSideShadow(30px, #88c425, 0.6);
  &-1 {
    border-radius: 0 0 var(--r) var(--r);
    --_m: 0, #0000 100%, #000 calc(100% + 1px);
    mask: radial-gradient(var(--r) at 100% var(--_m)) no-repeat,
      radial-gradient(var(--r) at 0 var(--_m)) 100% 0 no-repeat,
      linear-gradient(#0000 var(--r), #000 0);
    mask-size: var(--r);
  }
  &-2 {
    border-radius: var(--r) var(--r) 0 0;
    --_m: 100%, #0000 100%, #000 calc(100% + 1px);
    mask: radial-gradient(var(--r) at 100% var(--_m)) 0 100% no-repeat,
      radial-gradient(var(--r) at 0 var(--_m)) 100% 100% no-repeat,
      linear-gradient(0, #0000 var(--r), #000 0);
    mask-size: var(--r);
  }
  &-3 {
    border-radius: var(--r) 0 / calc(2 * var(--r)) 0;
    padding-block: var(--r);
    --_m: #0000 100%, #000 calc(100% + 1px);
    mask: radial-gradient(var(--r) at 100% 100%, var(--_m)) 0 100% no-repeat,
      radial-gradient(var(--r) at 0 0, var(--_m)) 100% 0 no-repeat,
      conic-gradient(#000 0 0) content-box;
    mask-size: var(--r) var(--r);
  }
  &-4 {
    border-radius: 0 var(--r) / 0 calc(2 * var(--r));
    padding-block: var(--r);
    --_m: #0000 100%, #000 calc(100% + 1px);
    mask: radial-gradient(var(--r) at 100% 0, var(--_m)) no-repeat,
      radial-gradient(var(--r) at 0 100%, var(--_m)) 100% 100% no-repeat,
      conic-gradient(#000 0 0) content-box;
    mask-size: var(--r) var(--r);
  }
}
